// 筛选列表
import { Input, Select, Space, Button, Table, Image, Switch } from 'antd'
import { useEffect } from 'react'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
import { useState } from 'react'
import { getCategoryList, getProList, getSearchProList } from '../../api/pro'

type SearchProps = {}
// 产品接口约束
interface DataType {
proid: string;
proname: string;
img1: string;
originprice: number;
discount: number;
sales: number;
stock: number;
category: string;
brand: string;
issale: number;
isrecommend: number;
isseckill: number;
}

export const Search = (props: SearchProps) => {
    const [proList, setProList] = useState<DataType[]>([]) // 表格数
    const [categoryList, setCategoryList] = useState<string[]>([]) // 分类数据
    const [category, setCategory] = useState<string>('') //分类搜索条件
    const [search, setSearch] = useState<string>('') // 关键词搜索

    const [current, setCurrent] = useState<number>(1) // 页码
    const [pageSize, setPageSize] = useState<number>(5) // 每页显示个数

    const getProListData = async () => { // 请求表格数据
    const res = await getProList()
    setProList(res.data.data)
    }

    const getCategoryListData = async () => { // 请求分类的数据
    const res = await getCategoryList()
    setCategoryList(res.data.data)
    }

    useEffect(() => {
    getProListData()
    getCategoryListData()
    }, [])


    return (
    <Space direction='vertical' style={{ width: '100%' }}>
    <Space>
        <Select value={category} style={{ width: 120 }} onChange={value => {
        console.log(value)
        setCategory(value)
        }}>
        <Select.Option key='all' value="">全部</Select.Option>
        {
            categoryList && categoryList.map(item => {
            return (
                <Select.Option key={item} value={item}>{item}</Select.Option>
            )
            })
        }
        </Select>
        <Input placeholder='请输入关键词' value={search} onChange={e => setSearch(e.target.value)} />
        <Button type='primary' onClick={async () => {
            const res = await getSearchProList({
                category,
                search
            })
            setProList(res.data.data)
        }}>搜索</Button>
        <Button type='primary' onClick={() => {
            const arr = JSON.parse(JSON.stringify(proList))
            arr.sort((a: DataType, b: DataType) => a.originprice - b.originprice)
            setProList(arr)
        }}>价格升序</Button>
    </Space>
        <Table
            dataSource={proList}
            rowKey="proid"
            bordered
            scroll={{ y: document.body.offsetHeight - 330 }}
            pagination={{
            current,
            pageSize,
            showTotal: (total) => {
                return <span> 共有 {total} 条数据</span>
            },
            onChange(page, pageSize) {
                setCurrent(page)
                setPageSize(pageSize)
            }
            }}
        >
            <Table.Column
            title="序号"
            render={(text, record, index) => { return <span>{(current - 1) * pageSize + index + 1}</span> }}
            ></Table.Column>
            <Table.Column
            title="分类"
            dataIndex="category"
            ></Table.Column>
            <Table.Column
            title="品牌"
            dataIndex="brand"
            ></Table.Column>
            <Table.Column
            title="名称"
            dataIndex="proname"
            render={(text) => { return text.length > 10 ? text.substring(0, 10) + "..." : text }}
            ></Table.Column>
            <Table.Column
            title="图片"
            dataIndex="img1"
            render={(text) => { return <Image src={text} width={80} height={80} /> }}
            ></Table.Column>
            <Table.Column
            title="价格"
            dataIndex="originprice"
            sorter={(a: DataType, b: DataType) => a.originprice - b.originprice}
            ></Table.Column>
            <Table.Column
            title="折扣"
            dataIndex="discount"
            sorter={(a: DataType, b: DataType) => a.discount - b.discount}
            ></Table.Column>
            <Table.Column
            title="销量"
            dataIndex="sales"
            sorter={(a: DataType, b: DataType) => a.sales - b.sales}
            ></Table.Column>
            <Table.Column
            title="库存"
            dataIndex="stock"
            sorter={(a: DataType, b: DataType) => a.stock - b.stock}
            ></Table.Column>
            <Table.Column
            title="是否上架"
            dataIndex="issale"
            render={(text) => { return <Switch checked={text === 1} /> }}
            ></Table.Column>
            <Table.Column
            title="是否推荐"
            dataIndex="isrecommend"
            render={(text) => { return <Switch checked={text === 1} /> }}
            ></Table.Column>
            <Table.Column
            title="是否秒杀"
            dataIndex="isseckill"
            render={(text) => { return <Switch checked={text === 1} /> }}
            ></Table.Column>
            <Table.Column
            title="操作"
            render={(text, record: DataType, index) => {
                return (
                <Space>
                    <Button type="primary" shape="circle" icon={<EditOutlined />} />
                    <Button danger shape="circle" icon={<DeleteOutlined />} />
                </Space>
                )
            }}
            ></Table.Column>
        </Table>
    </Space>
    );
}